<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <title>演示 - jQuery EasyUI 1.5.x Of Insdep theme examples</title>
    <link rel="stylesheet" type="text/css" href="/ui/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/ui/easyui_animation.css"/>
    <link rel="stylesheet" type="text/css" href="/ui/easyui_plus.css"/>
    <link rel="stylesheet" type="text/css" href="/ui/insdep_theme_default.css"/>
    <link rel="stylesheet" type="text/css" href="/ui/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/plugin/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/plugin/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/ui/jquery.insdep-extend.min.js"></script>
</head>
<body class="theme-login-layout">
<div class="theme-login-header"></div>
<div id="theme-login-form">
    <div class="QRcode"></div>
    <div class="QRcode-layout hide">
        <div class="QRcode-layout-close"></div>
        <div class="QRcode-header">
            <b>APP扫码登录</b>
            <span>请使用最新版APP进行扫码登录</span>
        </div>
        <div class="QRcode-content"><img src="/ui/images/QRcode-demo.png" width="215" /></div>
    </div>

    <form id="form" class="theme-login-form" method="post">
        <dl>
            <dt><img src="/ui/images/logo_110.png" /></dt>
            <dd><input id="username" name="username" class="theme-login-text" style="width:100%;"/></dd>
            <dd><input id="password" name="password" class="theme-login-text" style="width:100%;"/></dd>
            <dd><input id="code" name="code" class="theme-login-text" style="width:100%;"/></dd>
            <#--<dd><input id="smscode" name="smscode" class="theme-login-text" style="width:300px;"></dd>-->
            <dd>
                <a class="submit" id="" href="javascript:;">Sign in</a>
                <a class="easyui-linkbutton button" href="index.html">forgotten?</a>
            </dd>
        </dl>
    </form>
</div>
<div class="theme-login-footer">
    <dl>
        <dt><a>免费加入</a> | <a id="ok">产品优势</a> | <a>系列产品</a> | <a>应用下载</a> | <a>帮助手册</a> | <a>联系我们</a></dt>
        <dd>
            &copy 2007 - <script>var year = new Date();document.write(year.getFullYear());</script>
        </dd>
    </dl>
</div>
<script>
    $(function () {
        $(".QRcode").on("click", function () {
            $(".QRcode-layout").removeClass("hide");
        });
        $(".QRcode-layout-close").on("click", function () {
            $(".QRcode-layout").addClass("hide");
        });
        $.extend($.fn.validatebox.defaults.tipOptions, {
            onShow: function () {
                $(this).tooltip("tip").css({backgroundColor: "#ff7e00", border: "none", color: "#fff"});
            }
        })
        /*布局部分*/
        $('#theme-login-layout').layout({
            fit: true/*布局框架全屏*/
        });

        $('#username').textbox({
            prompt: 'Account or number',
            required: true,
            missingMessage: "请输入用户名"
        });
        $('#password').textbox({
            type: "password",
            prompt: 'Password',
            required: true,
            missingMessage: "请输入密码"
        });
        $('#code').textbox({
            prompt: 'Code',
            required: true,
            missingMessage: "请输入验证码"
        })

        $('#smscode').textbox({
            required: true,
            missingMessage: "请输入短信验证码",
            buttonText: '获取短信验证码',
            prompt: '短信验证码'
        });

        $('.submit').linkbutton({});
        $('.submit').bind('click', function(){
            $('#form').submit();
        });
        /*验证码tooltip*/
        $('#form').form({
            url: "http://www.insdep.com/",
            onSubmit: function () {
                var res = $(this).form('enableValidation').form('validate');
                res ? $.messager.progress() : "";
                return res;
            },
            success: function (data) {
                $.messager.progress('close');
                try {
                    var data = eval('(' + data + ')');
                    if (!data.success) {
                        $.messager.alert('提示', data.message, 'error', function () {
                            $('#username,#password').textbox('clear');
                        });
                    } else {
                        window.location.reload();
                    }
                }
                catch (e) {
                    $.insdep.error(data);
                }
            }
        });
        /*验证码tooltip*/
    })
</script>
</body>
</html>
